<html>
<head>
    <script src="../vue.js"></script>
</head>
<body>
<div id="root">
    Part 1
    <h1>
        {{reversedMessage}}
    </h1>
    
    
    Part 2
    <h1>
        All Tasks
    </h1>
    <ul>
        <li v-for="task in tasks" v-text="task.description"></li>
    </ul>
    <h1>
        incompleted Tasks
    </h1>
    <ul>
        <li v-for="task in incompletedTask" v-text="task.description"></li>
    </ul>
</div>
</body>
<script>
    var app=new Vue({
        el:'#root',
        data:{
            message:'now the title is being set throught',
            tasks:[ 
                {description:'gogogo',completed:true},
                {description:'nihao',completed:false},
                {description:'gogogo',completed:false},
                {description:'wodetian',completed:true},
            ]
        },
        computed:{
            reversedMessage:function(){
                return this.message.split('').reverse().join('');
            },
            incompletedTask:function(){
                return this.tasks.filter((task)=>!task.completed);
            }
        }
    });
</script>
</html>